<template>
  <div >
    <!-- 轮播图 -->
    <van-swipe :show-indicators="false" class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img :src="imgs[0]">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgs[1]">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgs[2]">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgs[3]">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgs[4]">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgs[5]">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgs[6]">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgs[7]">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgs[8]">
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgs[9]">
      </van-swipe-item>
    </van-swipe>

    <br>
    <div class="SVGicon">
      <img  style="width:120px;height:155px" src="@/assets/SVG/吃鸡.svg" >
      <img  style="width:120px;height:155px" src="@/assets/SVG/果汁.svg" >
      <img  style="width:120px;height:145px" src="@/assets/SVG/生日蛋糕.svg" >
      <img  style="width:120px;height:155px" src="@/assets/SVG/珍珠奶茶.svg" >
    </div>
    <br>

    <!-- 宫格组件 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item >
        <van-image :src="goods[0]" />
      </van-grid-item>
      <van-grid-item>
        <van-image :src="goods[1]" />
      </van-grid-item>
      <van-grid-item>
        <van-image :src="goods[2]" />
      </van-grid-item>
      <van-grid-item>
        <van-image :src="goods[3]" />
      </van-grid-item>
      <van-grid-item>
        <van-image :src="goods[4]" />
      </van-grid-item>
      <van-grid-item>
        <van-image :src="goods[5]" />
      </van-grid-item>
    </van-grid>

    <!-- 商品导航组件 -->
    <van-goods-action >
     <van-goods-action-button @click="SHOPPING" color="linear-gradient(#9be15d,#9be15d)" type="warning" text="点击消费" />
     <van-goods-action-button @click="SHOPPING" color="linear-gradient(#ff8177,#ff8177)" type="danger" text="快乐翻倍" />
    </van-goods-action>
  </div>

</template>

<script>
// import { Notify } from 'vant'
export default {
  data() {
    return {
      imgs: [
        require('@/assets/img/1.jpg'),
        require('@/assets/img/2.jpg'),
        require('@/assets/img/3.jpg'),
        require('@/assets/img/6.jpg'),
        require('@/assets/img/8.jpg'),
        require('@/assets/img/15.jpg'),
        require('@/assets/img/16.jpg'),
        require('@/assets/img/17.jpg'),
        require('@/assets/img/18.jpg'),
        require('@/assets/img/20.jpg')
      ],
      goods: [
        require('@/assets/goods/1.jpg'),
        require('@/assets/goods/2.jpg'),
        require('@/assets/goods/3.jpg'),
        require('@/assets/goods/4.jpg'),
        require('@/assets/goods/5.jpg'),
        require('@/assets/goods/6.jpg')
      ]
    }
  },
  created() {
  },
  methods: {
    SHOPPING() {
      // this.$router.push('/goods')
      alert('跳转页面')
    }
  }
}
</script>

<style>
body{
  /* background-color:#009966; */

}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    /* line-height: 150px; */
    text-align: center;
    /* background-color: #39a9ed; */
  }
  .van-grid-item__content {
    /* padding: 100px 120px !important; */
    padding: 0.2667rem 0.41333rem !important;
  }
  .SVGicon{
    display: flex;
    justify-content: space-around;
  }
  .van-goods-action{
    bottom: 35px !important;
  }
</style>
